<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highmaps Example</title>

		<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
		<style type="text/css">
#container {
    max-width: 400px; 
    height: 360px; 
    margin: 0 auto;
}
#table-div {
    max-width: 400px;
    margin: 3em auto;
}
		</style>
		<script type="text/javascript">
$(function () {

    // Load the data from the HTML table and tag it with an upper case name used for joining
    var data = [],
        // Get the map data
        mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

    Highcharts.data({
        table: document.getElementById('data'),
        startColumn: 1,
        startRow: 1,
        complete: function (options) {
            $.each(options.series[0].data, function () {
                data.push({
                    ucName: this[0],
                    value: this[1]
                });
            });
        }
    });

    // Process mapdata
    $.each(mapData, function () {
        var path = this.path,
            copy = {
                path: path
            };

        // This point has a square legend to the right
        if (path[1] === 9727) {

            // Identify the box
            Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

            // Place the center of the data label in the center of the point legend box
            this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX); // eslint-disable-line no-underscore-dangle
            this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY); // eslint-disable-line no-underscore-dangle

        }
        // Tag it for joining
        this.ucName = this.name.toUpperCase();
    });




    // Initiate the chart
    $('#container').highcharts('Map', {

        title: {
            text: 'US unemployment rate 2015'
        },

        subtitle: {
            text: 'Small US map with data labels'
        },

        mapNavigation: {
            enabled: true,
            enableButtons: false
        },

        xAxis: {
            labels: {
                enabled: false
            }
        },

        colorAxis: {},

        series: [{
            mapData: mapData,
            data: data,
            joinBy: 'ucName',
            name: 'Unemployment rate per 2015',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.point.properties['hc-a2'];
                },
                style: {
                    fontSize: '10px'
                }
            },
            tooltip: {
                valueSuffix: '%'
            }
        }, {
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
            color: 'silver'
        }]
    });
});
		</script>
	</head>
	<body>
<script src="http://cdn.hcharts.cn/highmaps/highmaps.js"></script>
<script src="http://cdn.hcharts.cn/highmaps/modules/data.js"></script>
<script src="http://cdn.hcharts.cn/highmaps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<div id="table-div">
    <table id="data">
        <tr>
            <td>1</td>
            <td>NEBRASKA</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NORTH DAKOTA</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>UTAH</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4</td>
            <td>VERMONT</td>
            <td>3.6</td>
        </tr>
        <tr>
            <td>5</td>
            <td>IOWA</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>MINNESOTA</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>NEW HAMPSHIRE</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>SOUTH DAKOTA</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>IDAHO</td>
            <td>3.9</td>
        </tr>
        <tr>
            <td>9</td>
            <td>MONTANA</td>
            <td>3.9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>HAWAII</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>11</td>
            <td>WYOMING</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>13</td>
            <td>COLORADO</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>13</td>
            <td>OKLAHOMA</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>13</td>
            <td>TEXAS</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>16</td>
            <td>KANSAS</td>
            <td>4.4</td>
        </tr>
        <tr>
            <td>17</td>
            <td>DELAWARE</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>17</td>
            <td>MASSACHUSETTS</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>17</td>
            <td>WISCONSIN</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>20</td>
            <td>MAINE</td>
            <td>4.7</td>
        </tr>
        <tr>
            <td>21</td>
            <td>VIRGINIA</td>
            <td>4.9</td>
        </tr>
        <tr>
            <td>22</td>
            <td>INDIANA</td>
            <td>5.1</td>
        </tr>
        <tr>
            <td>22</td>
            <td>KENTUCKY</td>
            <td>5.1</td>
        </tr>
        <tr>
            <td>24</td>
            <td>OHIO</td>
            <td>5.2</td>
        </tr>
        <tr>
            <td>25</td>
            <td>MARYLAND</td>
            <td>5.3</td>
        </tr>
        <tr>
            <td>25</td>
            <td>OREGON</td>
            <td>5.3</td>
        </tr>
        <tr>
            <td>27</td>
            <td>PENNSYLVANIA</td>
            <td>5.4</td>
        </tr>
        <tr>
            <td>27</td>
            <td>WASHINGTON</td>
            <td>5.4</td>
        </tr>
        <tr>
            <td>29</td>
            <td>MICHIGAN</td>
            <td>5.5</td>
        </tr>
        <tr>
            <td>30</td>
            <td>ARKANSAS</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>30</td>
            <td>FLORIDA</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>30</td>
            <td>NEW YORK</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>30</td>
            <td>NORTH CAROLINA</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>34</td>
            <td>ARIZONA</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>34</td>
            <td>MISSOURI</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>34</td>
            <td>TENNESSEE</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>37</td>
            <td>RHODE ISLAND</td>
            <td>5.9</td>
        </tr>
        <tr>
            <td>38</td>
            <td>CONNECTICUT</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>38</td>
            <td>ILLINOIS</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>40</td>
            <td>ALABAMA</td>
            <td>6.1</td>
        </tr>
        <tr>
            <td>41</td>
            <td>NEW MEXICO</td>
            <td>6.2</td>
        </tr>
        <tr>
            <td>42</td>
            <td>GEORGIA</td>
            <td>6.3</td>
        </tr>
        <tr>
            <td>43</td>
            <td>CALIFORNIA</td>
            <td>6.4</td>
        </tr>
        <tr>
            <td>44</td>
            <td>NEW JERSEY</td>
            <td>6.5</td>
        </tr>
        <tr>
            <td>45</td>
            <td>LOUISIANA</td>
            <td>6.6</td>
        </tr>
        <tr>
            <td>46</td>
            <td>MISSISSIPPI</td>
            <td>6.7</td>
        </tr>
        <tr>
            <td>47</td>
            <td>ALASKA</td>
            <td>6.8</td>
        </tr>
        <tr>
            <td>47</td>
            <td>SOUTH CAROLINA</td>
            <td>6.8</td>
        </tr>
        <tr>
            <td>49</td>
            <td>NEVADA</td>
            <td>7.0</td>
        </tr>
        <tr>
            <td>50</td>
            <td>WEST VIRGINIA</td>
            <td>7.2</td>
        </tr>
        <tr>
            <td>51</td>
            <td>DISTRICT OF COLUMBIA</td>
            <td>7.3</td>
        </tr>
    </table>
</div>
	</body>
</html>
